// 处理键盘按键按下事件
function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  
  if (!audio) return; // 如果没有对应音频，直接返回
  
  key.classList.add('playing'); // 添加按键按下效果
  audio.currentTime = 0; // 重置音频播放位置（允许连续快速播放）
  audio.play().catch(err => console.log('音频播放失败:', err)); // 播放音频并捕获错误
}

// 处理按键过渡动画结束（移除按下效果）
function removeTransition(e) {
  if (e.propertyName !== 'transform') return; // 只处理transform属性的过渡
  this.classList.remove('playing'); // 移除按键按下效果
}

// 处理鼠标点击事件
function clickKey() {
  const keyCode = this.getAttribute('data-key');
  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  
  if (!audio) return;
  
  this.classList.add('playing');
  audio.currentTime = 0;
  audio.play().catch(err => console.log('音频播放失败:', err));
}

// 获取所有按键元素
const keys = document.querySelectorAll('.key');
// 为每个按键添加过渡结束事件监听（用于移除动画）
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
// 为每个按键添加点击事件监听
keys.forEach(key => key.addEventListener('click', clickKey));
// 为整个文档添加键盘按下事件监听
window.addEventListener('keydown', playSound);

// 预加载音频元素（创建audio标签并添加到页面）
const sounds = ['clap', 'hihat', 'kick', 'openhat', 'boom', 'ride', 'snare', 'tom', 'tink'];
sounds.forEach((sound, index) => {
  const keyCodes = [65, 83, 68, 70, 71, 72, 74, 75, 76]; // 对应A、S、D...L的键盘ASCII码
  const audio = document.createElement('audio');
  audio.setAttribute('data-key', keyCodes[index]);
  // 音频文件路径（需在项目根目录创建sounds文件夹并放入对应wav文件）
  audio.src = `sounds/${sound}.wav`;
  document.body.appendChild(audio);
});